.sub-header
  position: relative

  .sub-header-item
    display: flex
    align-items: center
    justify-content: space-between
    width: 100%
    padding: 12px 0px
    font-size: 14px
    font-weight: 500
    border: 0
    background-color: transparent

    &[aria-expanded="true"] .dropdown-arrow
      transform: rotate(180deg)

    .dropdown-arrow
      transform: rotate(0deg)
      width: 14px
      height: 14px
      transition: transform 0.3s ease

.mobile-nav-dropdown
  width: 100%
  height: 0
  overflow: hidden
  transition: height 0.3s ease-in-out
  position: static !important
  display: block !important

  &.open
    height: calc(100dvh - 64px)
    overflow-y: auto

  .toctree-toggle
    align-items: center
    cursor: pointer
    display: inline-flex
    height: 30px
    justify-content: center
    position: absolute
    right: 16px
    top: 0
    width: 30px

  li.has-children
    position: relative

    &>details[open]>summary .toctree-toggle .fa-chevron-down
      transform: rotate(180deg)

  &__content
    padding: 16px 20px

    *, *::before, *::after
      list-style: none !important

      &::marker
        display: none !important
        content: none !important

@media (min-width: 960px)
  .sub-header
    display: none !important

  .mobile-nav-dropdown
    display: none !important
